<template>
  <div>
    <div
      style="height: 50px;background: linear-gradient(to bottom,#5ca4d1, #e1e3e5) ; display: flex; align-items: center; border-bottom: 1px solid">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <img src="@/assets/logo/头部logo.png" alt="" style="width: 28px">
          <div style="font-weight: bold; font-size: 22px; margin-left: 5px">高校双创学分认定全流程智慧化平台</div>
        </div>
      </div>
      <div style="width: fit-content; padding-right: 10px; display: flex; align-items: center;">
        <span style="margin-right: 20px;font-size: 18px">{{displayIndexName}}</span>
      </div>
    </div>

    <div style="display: flex">
      <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 50px)">
        <el-menu router style="border: none" :default-active="router.currentRoute.value.path"
          :default-openeds="['5']">
          <el-menu-item index="/manager/home">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-menu-item index="/manager/file">
            <el-icon><Files /></el-icon>
            <span>创新创业相关文件</span>
          </el-menu-item>
          <el-menu-item index="/manager/sysData" v-if="data.user.role === 'SUPER_ADMIN'">
            <el-icon>
              <DataAnalysis />
            </el-icon>
            <span>系统数据统计</span>
          </el-menu-item>
          <el-menu-item index="/manager/collegeData" v-if="data.user.role === 'ADMIN'">
            <el-icon>
              <DataAnalysis />
            </el-icon>
            <span>院数据统计</span>
          </el-menu-item>

          <el-sub-menu index="1" v-if="data.user.role === 'ADMIN'">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>创新创业管理</span>
            </template>
            <el-menu-item index="/manager/activeType">
              <el-icon><Memo /></el-icon>
              <span>创新创业分类管理</span>
            </el-menu-item>
            <el-menu-item index="/manager/activeCredit">
              <el-icon><Memo /></el-icon>
              <span>创新创业活动管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2" v-if="data.user.role === 'ADMIN'">
            <template #title>
              <el-icon>
                <edit></edit>
              </el-icon>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/manager/notice">
              <el-icon><Bell /></el-icon>
              <span>公告通知</span>
            </el-menu-item>
            <el-menu-item index="/manager/file">
              <el-icon><Bell /></el-icon>
              <span>创新创业相关文件</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3" v-if="data.user.role === 'SUPER_ADMIN' || data.user.role === 'ADMIN'">
            <template #title>
              <el-icon><Avatar /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/sysadmin" v-if="data.user.role === 'SUPER_ADMIN'">
              <el-icon><User /></el-icon>
              <span>系统管理员信息</span>
            </el-menu-item>
            <el-menu-item index="/manager/admin" v-if="data.user.role === 'SUPER_ADMIN'">
              <el-icon><User /></el-icon>
              <span>院管理员信息</span>
            </el-menu-item>
            <el-menu-item index="/manager/teacher" v-if="data.user.role === 'ADMIN'">
              <el-icon><User /></el-icon>
              <span>教师管理员信息</span>
            </el-menu-item>
            <el-menu-item index="/manager/student" v-if="data.user.role === 'ADMIN'">
              <el-icon><User /></el-icon>
              <span>学生信息</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4" v-if="data.user.role === 'SUPER_ADMIN' || data.user.role === 'ADMIN'">
            <template #title>
              <el-icon><edit /></el-icon>
              <span>行政管理</span>
            </template>
            <el-menu-item index="/manager/college" v-if="data.user.role === 'SUPER_ADMIN'">
              <el-icon><OfficeBuilding /></el-icon>
              <span>学院信息</span>
            </el-menu-item>
            <el-menu-item index="/manager/grade" v-if="data.user.role === 'ADMIN'">
              <el-icon><OfficeBuilding /></el-icon>
              <span>年级信息</span>
            </el-menu-item>
            <el-menu-item index="/manager/speciality" v-if="data.user.role === 'ADMIN'">
              <el-icon><OfficeBuilding /></el-icon>
              <span>专业信息</span>
            </el-menu-item>
            <el-menu-item index="/manager/classes" v-if="data.user.role === 'ADMIN'">
              <el-icon><OfficeBuilding /></el-icon>
              <span>班级信息</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5" v-if="data.user.role === 'ADMIN' || data.user.role === 'TEACHER'">
            <template #title>
              <el-icon><Promotion /></el-icon>
              <span>材料审核管理</span>
            </template>
            <el-menu-item index="/manager/record" v-if="data.user.role === 'ADMIN'">
              <el-icon><DocumentRemove /></el-icon>
              <span>待分配记录</span>
            </el-menu-item>
            <el-menu-item index="/manager/given" v-if="data.user.role === 'ADMIN'">
              <el-icon><DocumentAdd /></el-icon>
              <span>已分配记录</span>
            </el-menu-item>
            <el-menu-item index="/manager/end" v-if="data.user.role === 'ADMIN'">
              <el-icon><Document /></el-icon>
              <span>待审核记录</span>
            </el-menu-item>
            <el-menu-item index="/manager/first" v-if="data.user.role === 'TEACHER'">
              <el-icon><Document /></el-icon>
              <span>待审核记录</span>
            </el-menu-item>
            <el-menu-item index="/manager/endRecord" v-if="data.user.role === 'ADMIN'">
              <el-icon><DocumentChecked /></el-icon>
              <span>已审核记录</span>
            </el-menu-item>
            <el-menu-item index="/manager/firstRecord" v-if="data.user.role === 'TEACHER'">
              <el-icon><DocumentChecked /></el-icon>
              <span>已审核记录</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/manager/sApply" v-if="data.user.role === 'STUDENT'">
            <el-icon><Postcard /></el-icon>
            <span>学分认证申请</span>
          </el-menu-item>
          <el-menu-item index="/manager/sApplyRecord" v-if="data.user.role === 'STUDENT'">
            <el-icon><FolderOpened /></el-icon>
            <span>个人申请记录</span>
          </el-menu-item>
<!--          <el-menu-item index="/manager/message" v-if="data.user.role === 'STUDENT'">
            <el-icon><BellFilled /></el-icon>
            <span>个人消息通知</span>
          </el-menu-item>-->
          <el-menu-item index="/manager/sysPerson" v-if="data.user.role === 'SUPER_ADMIN'">
            <el-icon><UserFilled /></el-icon>
            <span>个人资料</span>
          </el-menu-item>
          <el-menu-item index="/manager/collegePerson" v-if="data.user.role === 'ADMIN'">
            <el-icon><UserFilled /></el-icon>
            <span>个人资料</span>
          </el-menu-item>
          <el-menu-item index="/manager/tPerson" v-if="data.user.role === 'TEACHER'">
            <el-icon><UserFilled /></el-icon>
            <span>个人资料</span>
          </el-menu-item>
          <el-menu-item index="/manager/sPerson" v-if="data.user.role === 'STUDENT'">
            <el-icon><UserFilled /></el-icon>
            <span>个人资料</span>
          </el-menu-item>

          <el-menu-item index="/manager/password">
            <el-icon><Lock /></el-icon>
            <span>修改密码</span>
          </el-menu-item>

          <el-menu-item index="login" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div style="flex: 1; width: 0; background-color: #f8f8ff; padding: 10px">
        <router-view @updateUser="updateUser" />
      </div>
    </div>

  </div>
</template>

<script setup>
import {computed, onMounted, reactive, watch} from "vue";
import router from "@/router";
import { ElMessage } from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('credit-system-user') || '{}')
})

const checkLogin = () => {
  // 检查是否存在任何用户标识
  const hasUserIdentity = data.user.stuId || data.user.teaId || data.user.adminId || data.user.sysId;
  if (!hasUserIdentity) {
    ElMessage.error('未登录！请重新登录')
    router.push('/studentLogin')
  }
}

// 监听用户信息变化
watch(
    () => data.user,
    (newUser) => {
      checkLogin()
    },
    { deep: true }
)

const displayIndexName = computed(() => {
  // 按优先级选择名称
  if (data.user.nickname) return data.user.nickname
  if (data.user.realname) return data.user.realname
  if (data.user.username) return data.user.username
  return '默认用户名'
})

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('credit-system-user') || '{}')
}

const logout = () => {
  if(data.user.role === 'STUDENT'){
    ElMessage.success('退出登录成功！')
    router.push('/studentLogin')
    localStorage.removeItem('credit-system-user')
  }else {
    ElMessage.success('退出登录成功！')
    router.push('/adminLogin')
    localStorage.removeItem('credit-system-user')
  }
}

onMounted(() => {
  checkLogin()
})

</script>

<style scoped>
.el-menu-item.is-active {
  background-color: #e0edfd !important;
}

.el-menu-item:hover {
  color: #1967e3;
}

:deep(th) {
  color: #333;
}
</style>